import styles from './styles.module.css';
import { App } from '../../types/app';

interface AppCardProps {
  app: App;
  index?: number;
  flex?: boolean;
}

export const AppCard = ({ app, index, flex = false }: AppCardProps) => {
  const iconClass = index === undefined 
    ? styles.roundedRect 
    : index % 2 === 0 
      ? styles.circle 
      : styles.square;

  return (
    <div className={`${styles.card} ${flex ? styles['card-flex'] : ''}`}>
       {flex ? <p className={styles.index}>{index || 0 + 1}</p> : null } 
      <img
        src={app.artworkUrl100}
        alt={app.name}
        className={`${styles.icon} ${iconClass}`}
      />
      <div className={`${flex ? styles['card-item-flex'] : styles['card-item']}`}>
      <h3>{app.name}</h3>
      <p>{app.category}</p>
      {index !== undefined && (
        <div className={styles.ratings}>
          <span>★{app.averageUserRating.toFixed(1)}</span>
          <span>({app.userRatingCount})</span>
        </div>
      )}
      </div>

    </div>
  );
};